<!DOCTYPE HTML>
<html>
<head>
    <title>门设置</title>
    <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
    <!--<link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet" type="text/css"/>-->
    <!--<link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet" type="text/css"/>-->
    <!--<script type="text/javascript" src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>-->
    <!--<script type="text/javascript" src="../../resources/lib/bui/js/bui-min.js"></script>-->
</head>
<body>
<div class="row">
<div class="span4" style="height: 200px;">
    <div id="door_list" class="span4" style="position: fixed">
    </div>
    <div style="clear: both;"></div>
</div>
<div class="span16">
<div id="door_tab"></div>
<div id="door_panel" class="bordered" style="padding:10px;">
<div><!-- 基本设置 -->
    <form id="door_base_form" action="" class="form-horizontal">

        <div class="row">
            <div class="span7">
                <fieldset>
                    <legend>基本</legend>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px"><s>*</s>名称：</label>

                        <div class="controls">
                            <input name="sname" type="text" class="input-small" data-rules="{required : true}">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px">门组：</label>

                        <div class="controls" data-rules="{required : true}">
                            <select class="input-small">
                                <option>门组1</option>
                                <option>门组2</option>
                                <option>门组3</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>选项</legend>
                    <div class="row">
                        <div class="control-group span3">
                            <label class="control-label"></label>
                            <div class="controls">
                                <label class="checkbox"><input type="checkbox">多人规则使能</label>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label"></label>
                            <div class="controls">
                                <label class="checkbox"><input type="checkbox">长时间不关门时报警</label>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>延时</legend>
                    <div class="control-group">
                        <label class="control-label">延长开门时间：</label>

                        <div class="controls">
                            <input name="" type="text" class="input-small" />秒
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">开门保持时间：</label>

                        <div class="controls">
                            <input name="" type="text" class="input-small" />秒
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="span5">
                <fieldset>
                    <legend>方向</legend>
                    <div class="control-group">
                        <div class="controls">
                            <label class="radio"><input type="radio">单向</label>&nbsp;&nbsp;&nbsp;
                            <label class="radio"><input type="radio">双向</label>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>自锁</legend>
                    <div class="control-group">
                        <div class="controls">
                            <label class="radio"><input type="radio">打开时</label>&nbsp;&nbsp;&nbsp;
                            <label class="radio"><input type="radio">关闭时</label>
                            <label class="radio"><input type="radio">禁用</label>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
            <div class="form-actions pull-right">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>
<div><!-- 读卡器 -->
    <form id="door_reader_form" action="" class="form-horizontal">
        <div class="row">
            <div class="span7">
                <fieldset>
                    <legend>基本设置</legend>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px"><s>*</s>名称：</label>

                        <div class="controls">
                            <input name="name" type="text" class="input-small" data-rules="{required : true}">
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>时间规则</legend>
                    <div class="control-group">
                        <label class="control-label">“密码方式”开门</label>
                        <div class="controls">
                            <select class="input-small">
                                <option>永远有效</option>
                                <option>永远无效</option>
                                <option>时间组1</option>
                                <option>时间组2</option>
                                <option>时间组3</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="span5">
                <fieldset>
                    <legend>防返传</legend>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px">门内区域</label>
                        <div class="controls">
                            <select class="input-small">
                                <option>区域1</option>
                                <option>区域2</option>
                                <option>区域3</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px">门外区域</label>
                        <div class="controls">
                            <select class="input-small">
                                <option>区域1</option>
                                <option>区域2</option>
                                <option>区域3</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
            <div class="form-actions pull-right">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>
<div><!-- 继电器 -->
    <form id="door_delay_form" action="" class="form-horizontal">
        <div class="row">
            <div class="span7">
                <fieldset>
                    <legend>基本设置</legend>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px"><s>*</s>名称：</label>

                        <div class="controls">
                            <input name="name" type="text" class="input-small" data-rules="{required : true}">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px">模式</label>
                        <div class="controls">
                            <select class="input-small">
                                <option>常开</option>
                                <option>常闭</option>
                                <option>定时</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="span8">
                <fieldset>
                    <legend>时间规则</legend>
                    <div class="control-group">
                        <label class="control-label">合闸</label>
                        <div class="controls">
                            <select class="input-small">
                                <option>永远有效</option>
                                <option>永远无效</option>
                                <option>时间组1</option>
                                <option>时间组2</option>
                                <option>时间组3</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">禁用</label>
                        <div class="controls">
                            <select class="input-small">
                                <option>永远有效</option>
                                <option>永远无效</option>
                                <option>时间组1</option>
                                <option>时间组2</option>
                                <option>时间组3</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">自动复归</label>
                        <div class="controls">
                            <select class="input-small">
                                <option>永远有效</option>
                                <option>永远无效</option>
                                <option>时间组1</option>
                                <option>时间组2</option>
                                <option>时间组3</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
            <div class="form-actions pull-right">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>
<div><!-- 输入设置 -->
    <form id="door_input_form" action="" class="form-horizontal">
        <div class="row">
            <div class="span7">
                <fieldset>
                    <legend>基本设置</legend>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px"><s>*</s>名称：</label>
                        <div class="controls">
                            <input name="name" type="text" class="input-small" data-rules="{required : true}">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label"></label>
                        <div class="controls">
                            <label class="checkbox"><input type="checkbox">使能</label>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px">线模块</label>
                        <div class="controls">
                            <select class="input-small">
                                <option>M1</option>
                                <option>M2</option>
                                <option>M3</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px">常态：</label>
                        <div class="controls">
                            <label class="radio"><input type="radio">合</label>&nbsp;&nbsp;&nbsp;
                            <label class="radio"><input type="radio">分</label>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="span8">
                <fieldset>
                    <legend>时间规则</legend>
                    <div class="control-group" title="忽略输入信号">
                        <label class="control-label" style="width: 60px">屏蔽</label>
                        <div class="controls">
                            <select class="input-small">
                                <option>永远有效</option>
                                <option>永远无效</option>
                                <option>时间组1</option>
                                <option>时间组2</option>
                                <option>时间组3</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" style="width: 60px">禁用</label>
                        <div class="controls">
                            <select class="input-small">
                                <option>永远有效</option>
                                <option>永远无效</option>
                                <option>时间组1</option>
                                <option>时间组2</option>
                                <option>时间组3</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
            <div class="form-actions pull-right">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>
</div>
</div>
</div>
<!--<script src="http://g.tbcdn.cn/fi/bui/bui-min.js?t=201308062006"></script>-->
<script type="text/javascript">
    var List = BUI.List;
    var items = [
                {text:'门1',value:'1'},
                {text:'门2',value:'2'},
                {text:'门3',value:'3'},
                {text:"门4",value:4}
            ],
            list = new List.SimpleList({
                elCls:'bui-select-list',//默认是'bui-simple-list'
//                width:'100%',
                render : '#door_list',
                items : items
            });
    list.render();
    list.on('selectedchange', function(){
        alert(list.getSelectedText() + '：' + list.getSelectedValue());
    });

    var Tab = BUI.Tab
    var doorTab = new Tab.TabPanel({
        render: '#door_tab',
        elCls: 'nav-tabs',
        panelContainer: '#door_panel',
        autoRender: true,
        children: [
            {text: '基本设置'},
            {text: '读卡器'},
            {text: '继电器'},
            {text: '输入'}
        ]
    });
    doorTab.setSelected(doorTab.getItemAt(0));

    var Form = BUI.Form;
    new Form.Form({
        srcNode: '#door_base_form'
    }).render();
    new Form.Form({
        srcNode: '#door_reader_form'
    }).render();
    new Form.Form({
        srcNode: '#door_delay_form'
    }).render();
    new Form.Form({
        srcNode: '#door_input_form'
    }).render();
</script>
</body>
</html>
